'use strict';
import React, { useState, useEffect } from 'react'
import { connect } from "react-redux";
import { getIndexList } from '../store/index';
import { Link } from "react-router-dom";
import styles from './index.css'

let Index = (props) => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    if (!props.list.length) {
      // 客户端获取数据
      props.getIndexList()
    }
  }, [])

  return <div>
    <h1 className={styles.title}>我是你大爷!{count}</h1>
    <button onClick={() => { setCount(count + 1) }}>累加</button>
    <br />
    <Link to="/child">打开子页面</Link>
    <hr />
    <ul>
      {props.list.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  </div>
};

Index.loadData = (store) => {
  return store.dispatch(getIndexList())
}

export default connect(state => ({
  list: state.index.list
}), { getIndexList }
)(Index)